import React, { Component } from 'react'
// 引入antd组件
import { Layout, Avatar, Menu, Dropdown } from 'antd';
//引入CSS
import './Dashboard.css'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined
} from '@ant-design/icons';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux" 

const { Header } = Layout;
class Headnav extends Component {
  state = {
    collapsed: false,
  };

  toggle = (iscollapsed) => {
    // actionCreator 传入参数 iscollapsed
    this.props.actionCreator(iscollapsed)
    console.log(iscollapsed);
    
    // 点击取反
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  render() {
    const Username = JSON.parse(localStorage.getItem("users")).username
    const RoleName = JSON.parse(localStorage.getItem("users")).roleName
    const menu = (
      <Menu>
        <Menu.Item>
          { RoleName }
        </Menu.Item>
        <Menu.Item onClick={this.handleOut}>
          退出
        </Menu.Item>
      </Menu>
    )
    return (
      <Header className="site-layout-background headernav" style={{ padding: 0 }}>
        {
          this.state.collapsed ?
          <MenuUnfoldOutlined onClick={()=>this.toggle(false)}
          className='trigger'/> 
           : 
          <MenuFoldOutlined onClick={()=>this.toggle(true)}
          className='trigger'/> 
        }

        <Dropdown overlay={menu} placement="bottomCenter">
          <div className="userName">
            { Username }&nbsp;&nbsp;
            <Avatar icon={<UserOutlined />} />
          </div>  
        </Dropdown>
     </Header>
    )
  }
  handleOut = () =>{
    localStorage.setItem("isLogin",'')
    localStorage.setItem("users",'') //只能存字符串
    this.props.history.push('/login')
  }
}

// state映射 成属性用
const mapStateToProps = ()=>{
  return { }
}
//方法映射成属性用
const mapDispathToProps = {
  actionCreator:(isCollapsed)=>{
    return {
      type:"MySideMenuCollapsed",
      payload:isCollapsed
    }
  }
}
export default withRouter( connect(mapStateToProps,mapDispathToProps)(Headnav))
